import React,{Component} from 'react'
import '../components/detail/detail.css'
import ScaleBanner from '../components/detail/ScaleBanner'
import Mangify from '../components/detail/Mangify'
import SizeSelector from '../components/detail/SizeSelector'
import Introduction from '../components/detail/Introduction'
import MyFavorite from '../components/detail/Myfavorite'
import * as api from '../api/detailPro'
export default class Details extends Component{
    constructor(props){
        super(props)
        this.state={
            list:[],
            obj:[]
        } 
    }
    componentDidMount(){
        let id=this.props.match.params.id
        api.detailProduct(id).then((data)=>{
            this.setState({
                list:data.data
            })
        })
        api.getProduct({per:4}).then((data)=>{
            this.setState({
                obj:data.data.products
            })
        })
    }
    render(){
        return(
            <div>
                <h2>细节详情</h2>
                <div class="detailBox">
                    <ScaleBanner />
                    <Mangify name={this.state.list} />
                    <SizeSelector name={this.state.list}/>
                </div>
                <Introduction/>
                <MyFavorite name={this.state.obj}/>
            </div>
        )
    }
}